import React from 'react';
import { Input, Menu, Icon } from 'antd';
import './index.scss';

const Search = Input.Search;
const organize = [
  {
    key: 1,
    label: '张成'
  },
  {
    key: 2,
    label: '莉莉'
  },
  {
    key: 3,
    label: '白剑'
  },
  {
    key: 4,
    label: '章鑫'
  }
];
const config = [
  {
    name: '食安分局',
    key: '11',
    submenu: [
      {
        name: '一局',
        key: '111',
        submenu: [
          {
            name: '章小柳',
            key: '1'
          },
          {
            name: '李晓旭',
            key: '2'
          },
          {
            name: '赵珊珊',
            key: '3'
          }
        ]
      }
    ]
  }
];
class Organize extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectedKey: '1',
      openKeys: '11',
      value: '',
      Treevalue: undefined
    };
  }
  handleSearch(e) {
    this.setState({
      value: e.target.value,
      isDisplay: e.target.value,
    });
  }
  handleClick(data) {
    this.setState({
      value: data.label,
      isDisplay: ''
    });
  }
  onMenuClick(e) {
    this.setState({
      openKeys: e,
    });
  }
  renderMenu() {
    const { selectedKey } = this.state;
    return (
      <div>
        <Menu
          defaultSelectedKeys={[selectedKey]}
          onOpenChange={this.onMenuClick.bind(this)}
          mode="inline"
          defaultOpenKeys={['11', '111']}
        >
          {
            config.map((item) => {
              return this.renderMenuItem(item);
            })
          }
        </Menu>
      </div>
    );
  }
  renderMenuItem(Pitem) {
    const { openKeys } = this.state;
    if (!Pitem.submenu) {
      return (
        <Menu.Item key={Pitem.key}>
          <span className="sub-label">{Pitem.name}</span>
        </Menu.Item>
      );
    }
    return (
      <Menu.SubMenu
        key={Pitem.key}
        title={
          <span className="label">
            <Icon type={openKeys.indexOf(Pitem.key) > -1 ? 'caret-down' : 'caret-right'} />
            {Pitem.name}
          </span>
        }
      >
        {
          Pitem.submenu.map((item) => {
            return this.renderMenuItem(item);
          })
        }
      </Menu.SubMenu>
    );
  }
  render() {
    const { value, isDisplay } = this.state;
    const display = isDisplay ? 'block' : 'none';
    return (
      <div className="business">
        <div className="search">
          <Search
            placeholder="查询"
            style={{ width: 380 }}
            onChange={this.handleSearch.bind(this)}
            value={value}
          />
          <div className="search-content" style={{ display: display }}>
            {
              organize.map(bus => (
                <div
                  key={bus.key}
                  onClick={this.handleClick.bind(this, bus)}
                >{bus.label}</div>
              ))
            }
          </div>
        </div>
        <div className="select">
          <div className="menu">
            {
              this.renderMenu()
            }
          </div>
        </div>
      </div>
    );
  }
}

export default Organize;
